<template>
  <div style="height: 100%">
    <toast-helper></toast-helper>
    <!-- pad端展示区 -->
    <div class="but">
      <span><Button :label="$t('messages.operate')" icon="pi pi-spin pi-cloud-upload" @click="visible = true"  v-if="padflag" class="but-1"/>
        <van-button plain type="primary" @click="changeLang1('en')" v-if="padflag">{{ $t('messages.en') }}</van-button>
        <van-button plain type="primary" @click="changeLang2('zh')" v-if="padflag">{{ $t('messages.zh') }}</van-button></span>
      <span class="but-2" v-if="padflag">{{ $t('messages.CPFAnalysisSystem') }}</span>
    </div>
    <SplitterPanel :size="40" v-if="padflag">
            <Splitter>
              <SplitterPanel class="flex align-items-center justify-content-center">
                <div style="height: 100%">
                  <user-select></user-select>
                </div>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>

          <!-- pad-operate -->
    <!-- <Dialog v-model:visible="visible" modal :header="$t('messages.operate')" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
      <SplitterPanel class="flex align-items-center justify-content-center dialog" :size="60">
              <div style="width: 100%; height: 100%; overflow: auto">

                
                <div class="a1">
                  <upload></upload>
                </div>

                
                <div class="a2">
                    <runner></runner>
                </div>

                
                <div class="a3">
                  <download></download>
                </div>

              </div>
          </SplitterPanel>
    </Dialog> -->
    <Dialog v-model:visible="visible" modal :header="$t('messages.operate')" :style="{ width: '25rem' }">
      <SplitterPanel class="flex align-items-center justify-content-center dialog" :size="60">
              <div style="width: 100%; height: 100%; overflow: auto">

                <!--   upload area   -->
                <div >
                  <upload></upload>
                </div>

                <!--   running area       -->
                <div>
                    <runner></runner>
                </div>

                <!--   download area      -->
                <div>
                  <download></download>
                </div>

              </div>
          </SplitterPanel>
    <!-- <template #footer>
        <Button label="Save" outlined @click="visible = false" autofocus />
    </template> -->
</Dialog>
    
    <!-- phone端展示区 -->
    <div class="phonecho" v-if="phoneflag">
      <van-icon name="wap-nav" @click="showPopup" size="30"/>
      <van-button plain type="primary" @click="changeLang1('en')" size="small" class="changelang">{{ $t('messages.en') }}</van-button>
      <van-button plain type="primary" @click="changeLang2('zh')" size="small" class="changelang">{{ $t('messages.zh') }}</van-button>
      <van-popup v-model:show="show" :style="{ width: '60%', height: '100%' }" position="left">
        <!-- <van-collapse v-model="activeNames">
          <van-collapse-item :title="$t('messages.Submit')" name="1">
            <div style="color: black;">
              <upload></upload>
            </div>
            
          </van-collapse-item>
          
          <van-collapse-item :title="$t('messages.Running')" name="2">
            <div style="color: black;">
              <runner></runner>
            </div>
            
          </van-collapse-item>
          
          <van-collapse-item :title="$t('messages.Download')" name="3">
            <div style="color: black;">
              <download></download>
            </div>
            
          </van-collapse-item>
          
            <div style="height: 100%">
                <user-select></user-select>
            </div>
        </van-collapse> -->
        <TabMenu :model="menus" :activeItem="activeTab" @update:activeItem="onTabChange" />

    <!-- 使用 <keep-alive> 缓存组件状态 -->
    <keep-alive>
      <component :is="activeTabComponent" :key="activeTab" />
    </keep-alive>
      </van-popup>
      <span class="phonecho1">{{ $t('messages.CPFAnalysisSystem') }}</span>
    </div>

    <Splitter class="splitter-class">
      <!--  页面左边部分     -->
      <!-- 
        size21较为合理
       -->
       <!-- pc端展示区 -->
      <SplitterPanel class="flex align-items-center justify-content-center" :size="35" :minSize="10" v-if="!padflag && !phoneflag">
        <Splitter layout="vertical">
          <!--  左上主事件操作区域   -->
          <SplitterPanel class="flex align-items-center justify-content-center" :size="60">
              <div style="width: 100%; height: 100%; overflow: auto">
               <!--    title area      -->
                <div style=
                         "background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800));
                          color: #FFFFFF; text-align: center;
                          height: 60px; line-height: 60px;
                          font-size: 1.6rem">
                    {{ $t('messages.CPFAnalysisSystem') }}
                </div>
                <van-button plain type="primary" @click="changeLang1('en')">{{ $t('messages.en') }}</van-button>
                <van-button plain type="primary" @click="changeLang2('zh')">{{ $t('messages.zh') }}</van-button>
                <!--   upload area   -->
                <div>
                  <upload></upload>
                </div>

                <!--   running area       -->
                <div>
                    <runner></runner>
                </div>

                <!--   download area      -->
                <div>
                  <download></download>
                </div>

              </div>
          </SplitterPanel>
          <!--   左下图像选择区       -->
          <SplitterPanel :size="40">
            <Splitter>
              <SplitterPanel class="flex align-items-center justify-content-center">
                <div style="height: 100%">
                  <user-select></user-select>
                  <!-- <van-button plain type="primary" @click="changeLang1('en')">{{ $t('messages.en') }}</van-button>
                  <van-button plain type="primary" @click="changeLang2('zh')">{{ $t('messages.zh') }}</van-button> -->
                </div>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>
        </Splitter>
      </SplitterPanel>
      

      <!--  右侧展示区域    -->
      <SplitterPanel :size="85">
        <Splitter layout="vertical">
          <!--   右上操作提示区域       -->
          <SplitterPanel class="flex align-items-center justify-content-center" :size="15">
            <Steps :model="translatedItems" v-model:activeStep="activeStep"></Steps>
          </SplitterPanel>
          <!--   右下比对区域       -->
          <SplitterPanel :size="85">
            <Splitter>
              <SplitterPanel class="flex align-items-center justify-content-center">
                <div style="height: 100%">
                  <table-area></table-area>
                </div>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>
        </Splitter>
      </SplitterPanel>
    </Splitter>
    <van-floating-bubble icon="exchange" @click="onClick" v-if="phoneflag"/>
  </div>
</template>

<script>
import Badge from 'primevue/badge'
import upload from "@/components/upload/upload";
import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';
import Card from 'primevue/card';
import Steps from 'primevue/steps';
import runner from "@/components/runner/runner";
import {mapState} from "vuex";
import ToastHelper from "@/components/toast-helper/toast-helper";
import TableArea from "@/components/table-area/table-area";
import Download from "@/components/download/download";
import UserSelect from "@/components/user-select/user-select";
import store from "@/store";
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import { ref } from 'vue';
import { showDialog, showToast } from 'vant';
import { useI18n } from 'vue-i18n';
import message from '@/store/modules/message';
import TabMenu from 'primevue/tabmenu';
import Page1 from '../tap/Page1.vue';
import Page2 from '../tap/Page2.vue';
import Page3 from '../tap/Page3.vue';
export default {
  name: "framework",
  components: {
    UserSelect,
    Download,
    TableArea,
    ToastHelper,
    Splitter,
    SplitterPanel,
    upload,
    Card,
    Badge,
    Steps,
    runner,
    Button,
    Dialog,
    TabMenu
  },
  computed: {
    ...mapState("app", ['runningStep','padflag','phoneflag']),
    // 根据当前选项卡返回对应的组件
    activeTabComponent() {
      switch (this.activeTab) {
        case 'page1':
          return Page1;
        case 'page2':
          return Page2;
        case 'page3':
          return Page3;
        default:
          return null;
      }
    }
  },
  watch: {
    runningStep(newVal, oldVal){
      this.activeStep = newVal
    },
  },
  mounted() {
  },
  created() {
    this.translateItems1();
  },
  data(){
    return {
      activeStep: 0,
      items1: [
        { labelKey: 'messages.UploadFirst' },
        { labelKey: 'messages.ClickStartButton' },
        { labelKey: 'messages.NowWaiting' },
        { labelKey: 'messages.Downloadzip' },
        // ... other items
      ],
      translatedItems: [],
      items: [
        {
          label: "Upload First"
        },
        {
          label: "Click Start Button"
        },
        {
          label: "Now Waiting"
        },
        {
          label: "Download zip"
        }
      ],
      visible: false,
      activeTab: 'page1', // 初始激活的选项卡
      menus: [
        { label: 'Submit', icon: 'pi pi-upload', command: () => this.changeTab('page1') },
        { label: 'Running', icon: 'pi pi-caret-right', command: () => this.changeTab('page2') },
        { label: 'Download', icon: 'pi pi-download', command: () => this.changeTab('page3') },
        // 添加更多选项卡
      ]

    }
  },
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const activeNames = ref(['1']);
    const onClick = () => {
      store.commit('app/SET_AREAFLAGE',true)
      if(locale.value == 'en')
      showToast('Switching succeeded');
      else
      showToast('切换成功');
    };
    const changeLang1 = (type) => {
      showToast('1s后切换英文语言');
      setTimeout(() => {
        locale.value = type;
        localStorage.setItem('lang',type)
        location.reload();
      },1000)
      // console.log(locale.value);
    };
    const changeLang2 = (type) => {
      showToast('Switch chinese language after 1s');
      setTimeout(() => {
        locale.value = type;
        localStorage.setItem('lang',type)
        location.reload();
      },1000)
      // console.log(locale.value);
    };
    // 语言类型对象读取
    const {locale} = useI18n();
    const translateItems1 = function() {
      this.translatedItems = this.items1.map(item => {
      return {
        ...item,
        label: this.$t(item.labelKey)
      };
    });
    };
    const changeTab = function(tab) {
      // 点击选项卡时更新activeTab的值
      this.activeTab = tab;
    };
    const onTabChange = function(event) {
      // 在TabMenu中的选项卡切换时更新activeTab的值
      this.activeTab = event.item.label;
    };
    return {
      show,
      showPopup,
      activeNames,
      onClick,
      changeLang1,
      changeLang2,
      locale,
      translateItems1,
      changeTab,
      onTabChange
    };
  }
}
</script>

<style scoped>
.splitter-class {
  height: calc(100% - 0px)
}
.but{
  text-align: left;
  position: relative;
  background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800));
}
.but-2 {
  position: absolute;
  left: 35%;
  /* width: 100%; */
  font-size: 40px;
  color: #FFFFFF;
}
.dialog {
  text-align: center;
}
.phonecho {
  /* height: 5%; */
  text-align: left;
  position: relative;
  /* background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800)); */
}
.phonecho1 {
  position: absolute;
  left: 45%;
  top: 30%;
  /* font-size:large */
  /* color: #FFFFFF; */
  
}
.changelang {
  height: auto;
}

</style>
